<template>
  <os-table autoHeight stripe action="system/rolePage" :columns="columns" :form="form" ref='osTable' :btn="btn" size="small" border></os-table>
</template>

<script>
export default {
  name: 'RolePage',
  data () {
    return {
      form: {
        rule: [
          { type: 'Input', title: '角色编码', field: 'roleCode' },
          { type: 'Input', title: '角色名称', field: 'roleName' },
          { type: 'el-button', field: 'search', props: { type: 'primary' }, children: ['查询'], emit: ['click'] },
          { type: 'el-button', field: 'clear', props: { type: 'primary' }, children: ['清空'], emit: ['click'] }
        ]
      },
      btn: [
        { text: '新增', cb: cb => this.onAdd() }
      ],
      columns: [
        // {label: 'id', prop: 'id'},
        { label: '角色编码', prop: 'roleCode', width: 250 },
        { label: '角色名称', prop: 'roleName', width: 250 },
        {
          label: '是否有效',
          prop: 'validation',
          width: 80,
          renderCell: ({ row }) => {
            const showData = this.$c.dictCode.validation.find(i => i.value === row.validation).label
            return <span>{showData}</span>
          }
        },
        { label: '描述', prop: 'description' },
        {
          label: '操作',
          prop: 'action',
          width: 250,
          renderCell: (data) => (
            <div>
              <el-button
                type="text"
                size="mini"
                onClick={() => this.onEdit(data)}
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                onClick={() => this.onDel(data)}
              >
                删除
              </el-button>
            </div>
          )
        }
      ],
      fApiRole: null,
      rule: [
        { type: 'hidden', title: 'id', field: 'id' },
        { type: 'Input', title: '角色编码', field: 'roleCode', validate: [this.$v.required()] },
        { type: 'Input', title: '角色名称', field: 'roleName', validate: [this.$v.required()] },
        { type: 'Radio', title: '是否有效', field: 'validation' },
        { type: 'Input', field: 'description', title: '描述', props: { type: 'textarea' }, col: { span: 24 } }
      ],
      options: {
        ...this.$utils.formOptions(100, 24),
        mounted: $f => {
          this.$utils.updateFormOptions($f, 'validation', this.$c.dictCode.validation)
        }
      }
    }
  },
  methods: {
    onAdd (row = null) {
      const btn = [{ text: '保存', loading: true, cb: cb => this.save(cb, row) }]
      const o = {}
      for (const item of this.rule) {
        o[item.field] = null
      }
      this.$utils.dialog(`${row ? '编辑' : '添加'}角色`, <form-create vModel={this.fApiRole} rule={this.rule} option={this.options}/>,
        { btn, width: '60%' })
      this.$nextTick(() => {
        if (!row) {
          // this.fApiRole.setValue(o)
          this.fApiRole.setValue({ validation: '1' })// 默认列表
          return
        }
        this.fApiRole.setValue(row)
      })
    },
    save (cb, row) {
      // console.log(row)
      this.fApiRole.validate(async (valid) => {
        cb()
        if (valid) {
          const formData = this.fApiRole.formData()
          formData.id = row?.id
          const action = row ? 'system/roleUpdate' : 'system/roleInsert'
          const { error } = await this.$store.dispatch(action, formData)
          if (!error) {
            this.$utils.message.success('保存成功')
            this.fApiRole.resetFields()
            this.$utils.hideDialog()
            this.$refs.osTable.getData()
          }
        }
      })
    },
    onEdit ({ row }) {
      this.onAdd(row)
    },
    async onDel ({ row }) {
      const re = await this.$utils.confirm('确定要删除吗？')
      if (!re) return
      const { error } = await this.$store.dispatch('system/roleDel', row.id)
      if (!error) {
        this.$utils.message.success('删除成功')
        this.$refs.osTable.getData()
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.m-l-10 {
  margin-left: 10px;
}
.c-f00 {
  color: #ff0000;
}
</style>
